import React from 'react';
import { Pagination, Spin } from 'antd';
import { SearchVideoType } from 'src/redux';

import { WebCard } from './card';

import './index.css';

interface Props {
  videos: Array<SearchVideoType>;
  page: number;
  pagecount: number;
  loading: boolean;
  pageChangeHandle: (nextPage: number) => void;
  clickHandle: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}

export const SearchListWeb: React.FC<Props> = ({ videos, page, pagecount, pageChangeHandle, loading, clickHandle }) => (
  <React.Fragment>
    {!videos.length ? (
      <div className="search-container-loading">
        <Spin size="large" />
      </div>
    ) : (
      <div className="search-container-web" onClick={clickHandle}>
        <div className="search-source-loading">{loading ? <Spin /> : null}</div>
        {videos.map(({ key, value }) => {
          return value.value.map((video) => <WebCard {...video} key={key + video.id} from={key} />);
        })}
        <div className="search-list-pagination">
          <Pagination
            showQuickJumper
            defaultCurrent={1}
            current={page}
            total={pagecount}
            onChange={pageChangeHandle}
            showSizeChanger={false}
            hideOnSinglePage
          />
        </div>
      </div>
    )}
  </React.Fragment>
);

export const SearchListMobile = () => {
  return <div className="search-container-mobile"></div>;
};
